// base
import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
// less
import './index.less'
import { getGlobalData } from '../../../configuration/globaldata'

const windowHeight = getGlobalData('windowHeight')

class SubModal extends Component {
  constructor (props) {
    super(props)
    this.state = {
      showComp: false,
      showAnimate: false
    }
  }

  componentWillMount () {
    // onLoad
  }

  componentDidMount () {
    // onready
  }

  componentDidShow () {}

  componentWillUnmount () {
    // onUnload
    clearTimeout(this.timer)
  }

  timer = null

  componentWillReceiveProps (nextprops) {
    if (nextprops.visible) {
      this.createAnimate()
    } else {
      this.cancelAnimate()
    }
  }

  createAnimate = () => {
    this.setState({
      showComp: true
    })
    clearTimeout(this.timer)
    this.timer = setTimeout(() => {
      this.setState({
        showAnimate: true
      })
    }, 300)
  }

  cancelAnimate = () => {
    this.setState({
      showAnimate: false
    })
    clearTimeout(this.timer)
    this.timer = setTimeout(() => {
      this.setState({
        showComp: false
      })
    }, 500)
  }

  onCancel = () => {
    this.props.onCancel && this.props.onCancel()
  }

  edit = () => {
    const { dataSingle } = this.props
    const { state = '' } = dataSingle
    if (state == 5) {
    } else {
      this.props.onEdit && this.props.onEdit()
    }
  }

  getOut = () => {
    const { dataSingle } = this.props
    const { state = '' } = dataSingle
    if (state == 5) {
    } else {
      this.props.onGetOut && this.props.onGetOut()
    }
  }

  doprewview = () => {
    this.props.onDoprewview && this.props.onDoprewview()
  }

  onFlash = (index, event) => {
    // 点击刷新
    event.stopPropagation()
    this.props.onFlash(index)
  }

  delay (time = 0) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve()
      }, time)
    })
  }
  checkStatus = dataSingle => {
    // 改变文字
    // state : 0-已上架 1-未上架 2-未付款 3-平台下架 4-平台永久下架 5 上架待审核 6-上架申请拒绝
    const { state = '' } = dataSingle
    let returnData = {
      state,
      text: '',
      url: ''
    }
    switch (state) {
      case '0':
        returnData.text = '下架'
        break
      case '1':
        returnData.text = '上架'
        break
      case '3':
        returnData.text = '请求上架'
        break
      case '4':
        returnData.text = '联系客服'
        // 联系客服的图标
        returnData.url =
          'https://imagesize.hrwork.com/sp/files/07238470-8130-473e-b081-0c20eb9beec2.png'
        break
      case '5':
        returnData.text = '审核中'
        break
      case '6':
        returnData.text = '重新申请'
        break
      default:
        break
    }

    return returnData
  }

  render () {
    const { showAnimate, showComp } = this.state
    const { top, dataSingle } = this.props

    const changeText = this.checkStatus(dataSingle || {})
    return (
      <View
        className={`SubModal_id00305 ${showComp ? '' : 'hide'}`}
        style={{ height: windowHeight }}
      >
        <View
          className={`modal-bg ${showAnimate ? 'modal-bg-active' : ''}`}
          onTouchStart={this.onCancel}
        />
        <View className={`animate-wrap ${showAnimate ? 'animate-wrap-active' : ''}`}>
          <View className="wrap-img" style={`top: ${top}px;`}>
            <View className="abs-wrap-wrap">
              <View
                className={`abs-wrap ${changeText.state == 5 ? 'applying' : ''}`}
                onClick={this.edit}
              >
                <Image
                  src="https://imagesize.hrwork.com/sp/files/184bb3fe-bef3-46c4-b2ff-7df1a41724fb.png"
                  className="left-image"
                />
                <View>编辑</View>
              </View>
              <View
                className={`abs-wrap ${changeText.state == 5 ? 'applying' : ''}`}
                onClick={this.getOut}
              >
                <Image
                  src={
                    changeText.url
                      ? changeText.url
                      : 'https://imagesize.hrwork.com/sp/files/ffd874fa-738a-461e-8c37-237dc25684cf.png'
                  }
                  className="left-image"
                />
                <View>{changeText.text}</View>
              </View>
              <View className="abs-wrap" onClick={this.doprewview}>
                <Image
                  src="https://imagesize.hrwork.com/sp/files/cbb38afd-be0f-47d9-8fa3-b5b19331eb1f.png"
                  className="left-image"
                />
                <View>预览</View>
              </View>
              <View className="abs-wrap" onClick={this.onFlash.bind(this, dataSingle)}>
                <Image
                  src="https://imagesize.hrwork.com/sp/files/5429b9cb-e267-4b3c-9c27-5f8085e4b1bf.png"
                  className="left-image"
                />
                <View>刷新</View>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

export default SubModal
